<template>
	<div class="shopshow">
		<router-link to='' class="rou">
			<div class="top">
				<img :src="imgath + aa.image_path" alt="">
				<div class="dd">
					<h3>{{aa.name}}</h3>
					<p>{{"商家配送/分钟送达/配送费￥"+aa.float_delivery_fee}}</p>
					<p>{{aa.promotion_info}}</p>
				</div>
				<div class="jt">
					<img src="../assets/arrow_right_h.png" alt="">
				</div>
			</div>

		</router-link>
		<div class='middle'>
			<p>商品</p>
			<p>评价</p>
		</div>
		<div class="content" v-for="(item,index) in bb" :key='index'>
			<div class="left">
                <div>{{item.name}}</div>
			</div>
			<div class="right">
				<div class="rt">
					<div class="r1">
						<h3 style="margin-left: 3rem;">{{item.name}}</h3>
						<p style="display: block;">{{item.description}}</p>
					</div>
                    <div class="r2">...</div>
				</div>
				<div class="rb">
				     <img :src="item.__ob__.value.foods[0].image_path" alt="" class="rbimg"> 
					 <div class="rbdiv">
						 <h3></h3>
						 <p></p>
						 <p></p>
						 <div>
					          <div></div>
							  <img src="" alt="">
						 </div>
					 </div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "shopshow",
		data: function() {
			return {
				aa: {},
				bb: '',
				params: {
					url: 'https://elm.cangdu.org/shopping/restaurant/' + this.$route.params.id,
					methods: 'GET',
					key: 'shop1_a'
				},
				pp: {
					url: 'https://elm.cangdu.org/shopping/v2/menu?restaurant_id=' + this.$route.params.id,
					methods: 'GET',
					key: 'shop11_a'
				}
			}
		},
		//在这里写计算属性主要为了拿到store文件中home的数据。
		computed: {
			imgath() {
				return this.$store.state.home.url1;
			}
		},
		created() {
			//拿到路由对象  , 此处不加 r
			window.console.log(this.$route.params.id);
			let obj = this;
			// window.console.log(this.$router);
			// window.console.log(this.$route);
			this.$store.dispatch('fetch', this.params).then(function(res) {
				//res是网络请求返回的数据
				window.console.log(res);
				obj.aa = res.data;
			}).catch(function(err) {
				window.console.log(err);
			});


			this.$store.dispatch('fetch', this.pp).then(function(res) {
				window.console.log(res);
				obj.bb = res.data;
			}).catch(function(err) {
				window.console.log(err);
			});
		},
	};
</script>

<style scoped>
	.shopshow {
		width: 100%;

	}

	.rou {
		/* 去除a标签默认的下划线 */
		text-decoration: none;
	}

	.top {
		background: #2B81AF;
		color: #000000;
		display: flex;
	}

	.top img {
		width: 25%;
		margin: 20px;
		display: inline-block;
	}

	.dd {
		width: 60%;
		display: flex;
		/* 竖直排布 */
		flex-direction: column;
		align-items: flex-start;
	}

	.dd h3 {
		color: white;
		font-size: 40px;
		margin: 0;
		margin-top: 30px;
	}

	.dd p {
		color: white;
		margin: 0;
		margin-top: 28px;
		font-size: 23px;
	}

	.jt {
		width: 15%;
		display: flex;
		align-items: center;
	}

	.jt img {
		width: 80%;
	}

	.middle {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.middle p {
		color: #000000;
	}
	.content{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		height: 120px;
	}
	.left{
		width: 20%;
		display: flex;
		align-items: center;
	}
	.left div{
		height: 30px;
	}
	.right{
		width: 80%;
	}
	.rt{
		display: flex;
		justify-content: space-between;
	}
	.r1{
		display: flex;
		justify-content: flex-start;
	}
	.r1 p{
		margin: 45px 0 0 20px;
		font-size: 28px;
	}
	.r2{
		margin: 20px;
	}
	.rb{
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.rbimg{
		width: 20%;
	}
	.rbdiv{
		width: 80%;
	}
	
	
</style>
